<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynatree - Example</title>

    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/jquery.dynatree.js" type="text/javascript"></script>

    <link href="css/dynatree/ui.dynatree.css" rel="stylesheet" type="text/css">





    <script type="text/javascript">
        $(function(){
            $("#orgtree").dynatree({

                initAjax: {
                    url: "data/org_hierarchy_json4.txt",
                    data: {key: "root", // Optional arguments to append to the url
                        mode: "all"
                    }
                },
                onActivate: function(node) {
                    $("#echoActive").text(node.data.key);
                    //setSelectedValue(node.data.key);
                },
                onDeactivate: function(node) {
                    $("#echoActive").text("");
                },
                minExpandLevel: 1,
                clickFolderMode: 1
            });
        });


        function getOrg()
        {
            if(treeType == 'single')
            {
                var node = $("#tree").dynatree("getActiveNode");
                return node.data.key + ":" + node.data.title;
            }
            else
            {
                // Display list of selected nodes
                var selNodes = $("#tree2").dynatree("getSelectedNodes");
                // convert to title/key array
                var selKeys = $.map(selNodes, function(node){
                    return node.data.key + ":" + node.data.title;
                });
                return selKeys.join(";");
            }
        }

    </script>
</head>

<body class="example">
<table>
    <tr>
        <td style="height: 100%">
            <div id="orgtree" style="height: 100%; width: 100%;"></div>
            <div>Selected Value: <span id="echoActive"></span></div>
        </td>
    </tr>
</table>




</body>
</html>